<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .checkgroup .item {
        height: 42px;
        line-height: 42px;
        padding: 0 10px;
        margin: 10px 0;
        border: 1px solid #c7c7c7;
        border-radius: 6px;
      }
      .checkgroup.radius .item {
        border-radius: 21px;
      }
      .checkgroup .item.selected {
        border: 1px solid #08b292;
        background: #08b292;
        color: #ffffff;
      }
    </style>
  </head>

  <body>
    <div id="jsCheckGroup">
      <div class="checkgroup radius">
        <div data-val="a" class="item selected">选项a</div>
        <div data-val="b" class="item">选项b</div>
        <div data-val="c" class="item">选项c</div>
        <div data-val="d" class="item">选项d</div>
      </div>
    </div>
    <script type="text/javascript">
      function CheckGroup(renderTo, options, isMultiple) {
        var that = this
        that.renderTo = renderTo
        that.options = options
        that.isMultiple = !!isMultiple
        that.initHtml()
        that.initEvent()
      }

      CheckGroup.prototype.initHtml = fInitHtml
      CheckGroup.prototype.initEvent = fInitEvent
      CheckGroup.prototype.toggleEl = fToggleEl
      CheckGroup.prototype.isSelected = fIsSelected
      CheckGroup.prototype.val = fVal

      function fInitHtml() {
        var that = this
        // 请补全代码，拼接html字符串
        var sHtml = `<div class="checkgroup ${
          that.isMultiple ? '' : 'radius'
        }">`
        for (let i = 0; i < that.options.length; i++) {
          sHtml += `<div data-val="${that.options[i].value}" class="item">${that.options[i].text}</div>`
        }
        sHtml += '</div>'
        that.renderTo.innerHTML = sHtml
        // 请补全代码，获取checkgroup的dom元素引用
        that.el = document.querySelector('.checkgroup')
      }

      function fInitEvent() {
        var that = this
        that.el &&
          that.el.addEventListener('click', function (event) {
            var item = event.target
            item.classList.contains('item') && that.toggleEl(item)
          })
      }

      function fToggleEl(item) {
        // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消 亮指定的选项dom元素
        var that = this
        if (that.isSelected(item)) {
          // 请补全代码
          if (that.isMultiple) {
            item.classList.remove('selected')
          }
        } else if (that.isMultiple) {
          // 请补全代码
          item.classList.add('selected')
        } else {
          // 请补全代码
          for (let i = 0; i < that.el.children.length; i++) {
            that.el.children[i].classList.remove('selected')
          }
          item.classList.add('selected')
        }
      }

      function fIsSelected(item) {
        // 请补全代码，判断item是否选中
        const itemClass = item.classList.contains('selected')
        return itemClass
      }

      function fVal(values) {
        var that = this
        if (arguments.length === 0) {
          // 请补全代码，获取高亮的选项元素
          var items = that.el.children
          // 请补全代码，获取高亮的选项元素的 data-val
          var result = []
          for (let i = 0; i < items.length; i++) {
            if (items[i].classList.contains('selected')) {
              result.push(items[i].getAttribute('data-val'))
            }
          }
          return result
        }
        !that.isMultiple && values.length > 1 && (values.length = 1)
        // 请补全代码，获取所有的选项元素
        var items = that.el.children
        // 请补全代码，在指定元素上加上高亮的class
        for (let setIdx = 0; setIdx < values.length; setIdx++) {
          for (let i = 0; i < items.length; i++) {
            if (items[i].getAttribute('data-val') === values[setIdx]) {
              // items[i].classList.add('selected')
              that.toggleEl(items[i])
              break
            }
          }
        }
      }
      // 具体功能和需求如下：
      // 1、单选组件请在 div.checkgroup 元素加上class radius
      // 2、选中时，请在对应选项dom元素加上class selected
      // 3、点击单选选项，如果未选中当前选项则选中当前选项并取消其他选项，否则取消当前选项
      // 4、点击多选选项，如果未选中当前选项则选中当前选项，否则取消当前选项
      // 5、给定的options中, text和value属性的值均为非空字符串
      // 6、val方法的参数和返回值均为数组(单选时数组长度不超过)
      // 7、请阅读代码，并根据注释完成对应代码(方法initHtml、toggleEl、isSelected、val)
      // 8、请不要手动修改html和css
      // 9、不要使用第三方插件
      // var options = [
      //   { text: '选项aa', value: 'aa' },
      //   { text: '选项bb', value: 'bb' },
      //   { text: '选项cc', value: 'cc' },
      //   { text: '选项dd', value: 'dd' },
      // ]
      // var item = new CheckGroup(
      //   document.getElementById('jsCheckGroup'),
      //   options,
      //   true
      // )
      // console.log(item.val())
      // item.val(['aa', 'bb'])
    </script>
  </body>
</html>
